
 import React, { PureComponent } from 'react'
 import PropTypes from 'prop-types';
 import { Button } from "antd";
 import {OrderStatusSteps} from "@common/presentational/CustomizeSteps";
 import {WAREHOUSE_ORDER_STATUS_CODE} from "@constants/WarehouseOrderStatus";
 import notify from "@utils/tip";
 import {connect} from "react-redux";
 import { creatWarehouseOrderReady, creatWarehouseOrderPickUp } from "@sagas/warehouse/send";
 import {getHistoryMatchParams} from "@utils/setUrlQuery";
 import {withRouter} from "react-router-dom";
 import OrderDeliverModal from "@components/warehouse/modal/OrderDeliverModal";
 import DoubleCheck from "@common/presentational/DoubleCheck";
 import DeliverOrderDetailModal from "@components/warehouse/modal/DeliverOrderDetailModal";

 let statusStepTemplate1 = (current, orderDetail) => ({
     current,
     stepList: [
         {
             statusStr:"客户付款",
             ...(current > 1 ? {
                 time: orderDetail.submit_time,
             } : {})
         }, {
             statusStr:"仓库发货",
             ...(current > 2 ? {
                time: orderDetail.deliver_time,
             } : {})
         }, 
     ]
 })

 let pickUpStatusStepTemplate = (current, orderDetail) => ({
     current,
     stepList: [
         {
             statusStr:"客户付款",
             ...(current > 1 ? {
                 time: orderDetail.submit_time,
             } : {})
         }, {
             statusStr:"仓库备货",
             ...(current > 2 ? {
                time: orderDetail.prepare_time,
             } : {})
         }, {
            statusStr:"订单完成",
            ...(current > 2 ? {
               time: orderDetail.complete_time,
            } : {})
        }, 
     ]
 })
 
 let statusStepTemplate2 = (current, orderDetail) => ({
     current,
     stepList: [
         {
             statusStr:"客户付款",
             ...(current > 1 ? {
                 time: orderDetail.submit_time,
             } : {})
         }, {
             statusStr:"交易关闭",
             ...(current > 2 ? {
                 time: orderDetail.complete_time,
             } : {})
         }
     ]
 })

 @connect(null, {
     creatWarehouseOrderReady,
     creatWarehouseOrderPickUp
 })
 @withRouter
 class WarehouseOrderDetailStatus extends PureComponent {
     static propTypes = {
         orderDetail: PropTypes.object,
     }
     constructor(props) {
         super(props);

         this.orderDeliverModalRef = React.createRef()
         this.deliverOrderDetailRef = React.createRef()
     }

     orderReady() {
         const { creatWarehouseOrderReady } = this.props
         const { orderNumber, warehouseId } = getHistoryMatchParams(this.props)
         creatWarehouseOrderReady({
             id: warehouseId,
             orderNumber
         },()=>{
             notify('备货完成', 'success')
             this.props.getOrderDetail()
         })
     }

     orderDeliver () {
         const { orderDetail } = this.props
         this.orderDeliverModalRef.current?.show(orderDetail)
     }

     orderPickUp() {
         const {  creatWarehouseOrderPickUp } = this.props
         const { orderNumber, warehouseId } = getHistoryMatchParams(this.props)
         creatWarehouseOrderPickUp({
             id:warehouseId,
             orderNumber
         },()=>{
             notify('取货完成', 'success')
             this.getTableInfo()
         })
     }

     printOrder () {
         const { orderNumber, warehouseId } = getHistoryMatchParams(this.props)
         this.deliverOrderDetailRef.current?.show({
             orderNumber,
             id: warehouseId
         })
     }
 
     statusRender () {
         const { orderDetail } = this.props
         if (orderDetail.deliver_type === 0) return this.selfTakeStatusRender(orderDetail)
         return this.deliverStatusRender(orderDetail)
     }
 
     deliverStatusRender (orderDetail) {
         let statusStr = ''
         let statusInfo = null
         let steps = null
         switch(orderDetail.status) {
             case WAREHOUSE_ORDER_STATUS_CODE.await_deliver:
                 statusStr = '待发货'
                 statusInfo = (
                     <div className="mgt-16">
                         { orderDetail.refund_flag ? (
                             <div className="ft-12 clr-green mgb-8">退款中</div>
                         ) : (
                             <div className="mgt-32 flex-vertical-center">
                                 <Button type="primary" className="button-small mgr-12" onClick={this.orderDeliver.bind(this)}>发货</Button>
                                 <Button type="primary" ghost className="button-small mgr-12" onClick={this.printOrder.bind(this)}>打印发货单</Button>
                             </div>
                         ) }
                     </div>
                 )
                 steps = statusStepTemplate1(2, orderDetail)
                 break;
             case WAREHOUSE_ORDER_STATUS_CODE.already_deliver:
                 statusStr = '已发货'
                 statusInfo = (
                     <div className="mgt-16">
                         { orderDetail.refund_flag ? (
                             <div className="ft-12 clr-green mgb-8">退款中</div>
                         ) : null }
                         <div className="ft-12 ft-clr-md">物流信息：{ orderDetail.platform_name }，{ orderDetail.platform_order_number }</div>
                     </div>
                 )
                 steps = statusStepTemplate1(3, orderDetail)
                 break;
             case WAREHOUSE_ORDER_STATUS_CODE.finished:
                 statusStr = '已完成'
                 statusInfo = (
                     <div className="mgt-16">
                         <div className="ft-12 ft-clr-md">物流信息：{ orderDetail.platform_name }，{ orderDetail.platform_order_number }</div>
                     </div>
                 )
                 steps = statusStepTemplate1(3, orderDetail)
                 break;
             case WAREHOUSE_ORDER_STATUS_CODE.closed:
                 statusStr = '已关闭'
                 statusInfo = null
                 steps = statusStepTemplate2(3, orderDetail)
                 break;
             default:
                 break
         }
         return {
             statusStr,
             statusInfo,
             steps
         }
     }
 
     selfTakeStatusRender (orderDetail) {
         let statusStr = ''
         let statusInfo = null
         let steps = {}
         switch(orderDetail.status) {
             case WAREHOUSE_ORDER_STATUS_CODE.await_order_ready:
                 statusStr = '待备货'
                 statusInfo = (
                     <div className="mgt-16">
                         { orderDetail.refund_flag ? (
                             <div className="ft-12 clr-green mgb-8">退款中</div>
                         ) : (
                             <div className="mgt-32 flex-vertical-center">
                                 <Button type="primary" className="button-small mgr-12" onClick={this.orderReady.bind(this)}>备货</Button>
                                 <Button type="primary" ghost className="button-small mgr-12" onClick={this.printOrder.bind(this)}>打印发货单</Button>
                             </div>
                         )}
                     </div>
                 )
                 steps = pickUpStatusStepTemplate(2, orderDetail)
                 break;
             case WAREHOUSE_ORDER_STATUS_CODE.await_self_take:
                 statusStr = '待客户自提'
                 statusInfo = (
                     <div className="mgt-16">
                         <div className="ft-12 ft-clr-md">取货码：{ orderDetail.extract_key }</div>
                         { orderDetail.refund_flag ? (
                             <div className="ft-12 clr-green mgt-8">退款中</div>
                         ) : (
                             <div className="mgt-8 flex-vertical-center">
                                 <DoubleCheck title='是否确认取货？' onClick={this.orderPickUp.bind(this)}>
                                    <Button type="primary" className="button-small mgr-12">确认取货</Button>
                                 </DoubleCheck>
                                 <Button type="primary" ghost className="button-small mgr-12" onClick={this.printOrder.bind(this)}>打印发货单</Button>
                             </div>
                         )}
                     </div>
                 )
                 steps = pickUpStatusStepTemplate(3, orderDetail)
                 break;
             case WAREHOUSE_ORDER_STATUS_CODE.finished:
                 statusStr = '已完成'
                 statusInfo = (
                     <div className="mgt-16">
                         <div className="ft-12 ft-clr-md">取货码：{ orderDetail.extract_key }</div>
                     </div>
                 )
                 steps = pickUpStatusStepTemplate(4, orderDetail)
                 break;
             case WAREHOUSE_ORDER_STATUS_CODE.closed:
                 statusStr = '已关闭'
                 statusInfo = null
                 steps = statusStepTemplate2(3, orderDetail)
                 break;
             default:
                 break
         }
         return {
             statusStr,
             statusInfo,
             steps
         }
     }
 
     render () {
         const { statusStr, statusInfo, steps } = this.statusRender()
         const { warehouseId } = getHistoryMatchParams(this.props)
         return (
             <div className="detail-box flex-row-between">
                 <div className="max-w-quarter-2">
                     <div className="ft-20 ft-clr-d">{ statusStr }</div>
                     { statusInfo }
                 </div>
                 <OrderStatusSteps
                     {...steps}
                 />
                 <OrderDeliverModal
                     id={warehouseId}
                     ref={this.orderDeliverModalRef}
                     callback={this.props.getOrderDetail}
                 />
                 <DeliverOrderDetailModal
                     ref={this.deliverOrderDetailRef}
                     callback={this.props.getOrderDetail}
                 />
             </div>
         )
     }
 }
 
 export default WarehouseOrderDetailStatus